import type { CSSProperties } from 'react'
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'

export function StatusBar({
  background = '#fff',
  sticky = false,
}: {
  background?: string
  sticky?: boolean
}) {
  const statusBarHeight = Taro.getWindowInfo().statusBarHeight

  const positionStyle = (sticky
    ? {
        position: 'sticky',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 800,
      }
    : {}) as CSSProperties

  return (
    <View style={{ height: `${statusBarHeight}px`, background, ...positionStyle }} />
  )
}
